<template>
  <el-card
    class="alarm-info work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="alarm-info__header work-bench-team__card__header">
      <div class="alarm-info__header--left">
        <span class="work-bench-team__card__title alarm-info__title">{{ CORE.MAP.ALARM }}信息</span>
        <span class="alarm-info__header__num">({{ list.length || 0 }})</span>
      </div>
      <button class="work-bench-team__card__header__btn" @click="$router.push({ name: 'MaintainAlarm_AlarmList' })">
        更多 >>
      </button>
    </div>
    <div v-if="list && list.length" class="work-bench-team__card__body alarm-info__body">
      <el-carousel class="alarm-info__carousel" height="100%" direction="vertical" :autoplay="true" :loop="true">
        <el-carousel-item v-for="i in Math.ceil(list.length / 5)" :key="i">
          <div
            class="alarm-info__item"
            v-for="(item, index) in list.slice((i - 1) * 5, i * 5)"
            :key="item.id"
            :class="{ 'alarm-info__item--2': index % 2 === 1 }"
            @click="toOpen(item.id)"
          >
            <div class="alarm-info__item__time">{{ moment(item.alarmTime).format('MM-DD HH:mm:ss') }}</div>
            <div class="alarm-info__item__details">{{ item.alarmDetail }}</div>
            <div
              class="alarm-info__item__status"
              :class="{ 2: 'alarm-info__item__status--1', 1: 'alarm-info__item__status--2' }[item.alarmResolveState]"
            >
              {{ { 2: '已处理', 1: '未处理' }[item.alarmResolveState] }}
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else class="alarm-info__no-data">
      <span>暂无数据!</span>
    </div>

    <DetailAlarm ref="detail" v-model="easyVisible" :id="activeAlarmId" />
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import moment from 'moment'
import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import state from './state'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AlarmInfo',

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      moment,
      ...state(),
      easyVisible: false, // 弹窗是否可见
      activeAlarmId: '',
    }
  },

  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开
     */
    toOpen(id) {
      this.easyVisible = true
      this.activeAlarmId = id
    },
  },

  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamAlarmList({
        type: 1,
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        this.list = res.content || []
      })
    })
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
